<template>
  <div class="app-container">
    <el-dialog  :before-close="closedialog" :visible="dialogvisable">


      <div  v-for="(item,index) in questions" :key="item.message">
        <div v-if="item.type==1">
          <el-card class="box-card">
            <div slot="header" class="clearfix">
              <el-input v-model="item.question">
                <template slot="prepend">选择题：</template>
              </el-input>
              <el-input v-model="item.score">
                <template slot="prepend">分值：</template>
              </el-input>
             </div>
            <el-radio-group v-model="item.realanswer">

              <el-row class="radioitem" >
                <el-radio :value="item.answer1" >
                  {{item.answer1}}
                </el-radio>
              </el-row>
              <el-row class="radioitem" >
                <el-radio :value="item.answer2" >
                  {{item.answer2}}
                </el-radio>
              </el-row>
              <el-row class="radioitem" >
                <el-radio :value="item.answer3" >
                  {{item.answer3}}
                </el-radio>
              </el-row>

              <el-row class="radioitem" >
                <el-radio :value="item.answer4" >
                  {{item.answer4}}
                </el-radio>
              </el-row>
            </el-radio-group>
          </el-card>
        </div>
        <div v-if="item.type==2">
          <el-card class="box-card">
            <div slot="header" class="clearfix">
              <el-input v-model="item.question">
                <template slot="prepend">判断题：</template>
              </el-input>
              <el-input v-model="item.score">
                <template slot="prepend">分值：</template>
              </el-input>
              <el-select style="display: inline-block" size="mini" v-model="item.type" placeholder="修改题型">
                <el-option
                  v-for="item in questiontype"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value">
                </el-option>
              </el-select>

            </div>
            <el-radio-group v-model="item.answer">
              <el-row class="radioitem"  >
                <el-radio
                  :label="item.answer1"
                  :value="item.answer1">
                  A ：
                  <el-input
                    type="textarea"
                    :rows="2"
                    size="mini"
                    v-model="item.answer1"></el-input>
                </el-radio>
                <el-radio
                  :label="item.answer2"
                  :value="item.answer2">
                  B ：
                  <el-input
                    type="textarea"
                    :rows="2"
                    size="mini"
                    v-model="item.answer2"></el-input>
                </el-radio>
              </el-row>

            </el-radio-group>
          </el-card>
        </div>
        <div v-if="item.type==3">
          <el-card class="box-card">
            <div slot="header" class="clearfix">
              <el-input v-model="item.question">
                <template slot="prepend">多选题：</template>
              </el-input>
              <el-input v-model="item.score">
                <template slot="prepend">分值：</template>
              </el-input>
            </div>
            <el-radio-group v-model="item.realanswer">

              <el-row class="radioitem" >
                <el-radio :value="item.answer1" >
                  {{item.answer1}}
                </el-radio>
              </el-row>
              <el-row class="radioitem" >
                <el-radio :value="item.answer2" >
                  {{item.answer2}}
                </el-radio>
              </el-row>
              <el-row class="radioitem" >
                <el-radio :value="item.answer3" >
                  {{item.answer3}}
                </el-radio>
              </el-row>
              <el-row class="radioitem" >
                <el-radio :value="item.answer4" >
                  {{item.answer4}}
                </el-radio>
              </el-row>

            </el-radio-group>
          </el-card>
        </div>
        <div v-if="item.type==4">
          <el-card class="box-card">
            <div slot="header" class="clearfix">
              <el-input v-model="item.question">
                <template slot="prepend">简答题：</template>
              </el-input>
              <el-input v-model="item.score">
                <template slot="prepend">分值：</template>
              </el-input>
              <el-select style="display: inline-block" size="mini" v-model="item.type" placeholder="修改题型">
                <el-option
                  v-for="item in questiontype"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value">
                </el-option>
              </el-select>

            </div>
            <el-input rows="5" type="textarea" v-model="item.answer"></el-input>
          </el-card>
        </div>
      </div>
    </el-dialog>
    <el-table
      :data="list"
      v-loading.body="listLoading"
      element-loading-text="Loading"
      border
      fit
      highlight-current-row >
      <el-table-column align="center" label="ID" width="95">
        <template slot-scope="scope">
          {{ scope.$index }}
        </template>
      </el-table-column>
      <el-table-column label="海报">
        <template slot-scope="scope">
          <img width="100px" :src="'http://localhost:8080/downloadFile/'+ scope.row.img"/>
        </template>
      </el-table-column>
      <el-table-column label="名称">
        <template slot-scope="scope">
          {{scope.row.name}}
        </template>
      </el-table-column>
      <el-table-column label="总分"  >
        <template slot-scope="scope">

          {{scope.row.totalscore}}
        </template>
      </el-table-column>
      <el-table-column label=出题老师  >
        <template slot-scope="scope">
          {{scope.row.teacher.name}}
        </template>
      </el-table-column>
      <el-table-column label="所属班级"  >
        <template slot-scope="scope">
          {{scope.row.classroom.name}}
        </template>
      </el-table-column>

      <el-table-column label="试卷类型"  >
        <template slot-scope="scope">
          <span v-if="scope.row.type==1">
            练习卷
          </span>
          <span v-if="scope.row.type==2">
            正式卷
          </span>
        </template>
      </el-table-column>
      <el-table-column label="开始时间"  >
        <template slot-scope="scope">
          {{scope.row.createtime}}
        </template>
      </el-table-column>
      <el-table-column label="结束时间"  >
        <template slot-scope="scope">
          {{scope.row.endtime}}
        </template>
      </el-table-column>
      <el-table-column label="状态"  >
        <template slot-scope="scope">
          <el-tag v-if="scope.row.status == 0" type="success">可用</el-tag>
          <el-tag v-else type="danger">不可用</el-tag>
        </template>
      </el-table-column>
      <el-table-column
        align="center"
        prop="created_at"
        label="操作"
        width="200"
      >
        <template slot-scope="scope">
          <el-button type="primary" size="mini">保存</el-button>
          <el-button type="primary" @click="showpaper(scope.row)" size="mini">查看试卷</el-button>
          <el-button v-if="scope.row.status == 0" @click="disable(scope.row)" ype="danger" size="mini">关闭使用</el-button>
          <el-button v-else type="success"  @click="disable(scope.row)"  size="mini">开放使用</el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>
<script>

import { getAllPaperList,getPaperDetail,updatePaper  } from "@/api/admin";

export default {
  data() {
    return {
      list: null,
      dialogvisable:false,
      questions:[],
      listLoading: true,
      listQuery:{
        currentpage:1,
        pagesize:20,
        name:"",
      },

      questiontype: [
        {
          label: '选择题',
          value: 1
        }, {
          label: '判断题',
          value: 2
        }, {
          label: '多选题',
          value: 3
        }, {
          label: '简答题',
          value: 4
        }
      ],
      panduantitype: [
        {
          label: '正确',
          value: 'A'
        }, {
          label: '错误',
          value: 'B'
        }
      ],
    };
  },
  created() {
    this.fetchData();
  },
  methods: {
    fetchData() {

      this.listLoading = true;
      getAllPaperList(this.listQuery).then((response) => {
        console.log("get list success")
        this.list = response.info;
        this.listLoading = false;
      }).catch(err=>{
        this.listLoading = false;
      })

    },
    showpaper(e){
      getPaperDetail({id:e.id}).then(res=>{
        console.log(res)
        this.questions = res.info
        this.dialogvisable = true;
      })
    },
    disable:function(e){
      if(e.status == 0){
        e.status =1;
      }else
        e.status =0;
      updatePaper(e).then(res=>{
        this.$message.success("切换成功！")
      })
    },
    closedialog(){
      this.dialogvisable = false;
    }
  },
};
</script>

<style type="text/css" scoped>
  .radioitem {
    margin: 10px;
  }

  .avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }
  .avatar-uploader .el-upload:hover {
    border-color: #409EFF;
  }
  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
  }
  .avatar {
    width: 178px;
    height: 178px;
    display: block;
  }
</style>
